<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog ba-operate-dialog-add"
        :close-on-click-modal="false"
        :model-value="props.data.show"
        width="50%"
        :before-close="close"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('添加代理商') }}
            </div>
        </template>
        <el-scrollbar class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                style="width: calc(100% - 100px)"
            >
                <el-form
                    label-position="right"
                    label-width="100px"
                >
                    <FormItem :label="t('代理商')" :placeholder="t('请选择代理商')" type="remoteSelect" v-model="state.form.agent_id" :input-attr="{ multiple: true, pk: 'id', field: 'name', 'remote-url': '/system/corp.Agent/index?order_id=' + state.form.order_id }" />
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + 100 / 1.8 + 'px)'">
                <el-button @click="close">{{ t('取消') }}</el-button>
                <el-button v-blur type="primary" @click="save">{{ t('添加') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm } from 'element-plus'

import { addAgentApi } from '/@/api/most/customer/order'

const emit = defineEmits(["hideAdd", "getAgent"])

const { t } = useI18n()

const state = reactive({
    form: {
        order_id: props.data.order_id,
        agent_id: []
    }
})

interface Props {
    show: boolean
    data: anyObj
}

const props = defineProps<Props>()


const close = (done: () => void) => {
    emit("getAgent");
    emit("hideAdd")
    done()
}

const save = () => {
    addAgentApi(state.form).then((e) => {
        console.log(e)
        close()
    })
}

</script>

<style scoped lang="scss"></style>
